// CustomTable.js
import { Node } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'
import TableComponent from './Table.vue'

export const CustomTable = Node.create({
  name: 'customTable',

  group: 'block',

  content: 'block*',

  draggable: true,

  addAttributes() {
    return {
      data: {
        default: [{ name: '默认姓名', age: '25', address: '默认地址' }]
      },
      columns: {
        default: [
          { prop: 'name', label: '姓名' },
          { prop: 'age', label: '年龄' },
          { prop: 'address', label: '地址' }
        ]
      }
    }
  },

  parseHTML() {
    return [
      {
        tag: 'div[data-type="custom-table"]'
      }
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', { ...HTMLAttributes, 'data-type': 'custom-table' }]
  },

  addNodeView() {
    return VueNodeViewRenderer(TableComponent)
  },

  addCommands() {
    return {
      insertCustomTable:
        options =>
        ({ commands }) => {
          return commands.insertContent({
            type: this.name,
            attrs: options
          })
        }
    }
  }
})
